<template>
  <ThreeSectionTabsPage>
    <template #tabs>
      <el-tabs v-model="currentTabName" class="tabs" @tab-click="handleTabClick">
        <el-tab-pane :label="$t('sequence.base')" name="Base"></el-tab-pane>
        <el-tab-pane :label="$t('sequence.preview')" name="Sql"></el-tab-pane>
      </el-tabs>
    </template>
    <template #center-container>
      <div v-show="currentTabName == 'Base'">
        <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="105px">
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item prop="sequenceName" :label="$t('sequence.name')">
                <el-input v-model="form.sequenceName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="increment" :label="$t('sequence.increment')">
                <el-input v-model.number="form.increment" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="start" :label="$t('sequence.startValue')">
                <el-input v-model.number="form.start" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="minValue" :label="$t('sequence.minValue')">
                <el-input v-model.number="form.minValue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="maxValue" :label="$t('sequence.maxValue')">
                <el-input v-model.number="form.maxValue" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="cache" :label="$t('sequence.cacheValue')">
                <el-input v-model.number="form.cache" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="isCycle" :label="$t('sequence.isCycle')">
                <el-switch v-model="form.isCycle" />
              </el-form-item>
            </el-col>
          </el-row>
          <hr
            style="
              width: 100%;
              border: none;
              height: 1px;
              background-color: #d9dbe1;
              margin-bottom: 18px;
            "
          />
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item prop="tableSchema" :label="$t('sequence.mode')">
                <el-select v-model="form.tableSchema" disabled>
                  <el-option label="scott" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="tableName" :label="$t('sequence.table')">
                <el-select v-model="form.tableName" @change="changTableName">
                  <el-option
                    v-for="item in list.tableList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="tableColumn" :label="$t('sequence.column')">
                <el-select v-model="form.tableColumn">
                  <el-option
                    v-for="item in list.columnList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <AceEditor v-show="currentTabName == 'Sql'" ref="editorPreRef" type="form" style="width: 100%" />
    </template>
    <template #page-bottom-button>
      <el-button type="primary" @click="handleSave('Base')">
        {{ $t('button.create') }}
      </el-button>
      <el-button @click="handleReset">
        {{ $t('button.reset') }}
      </el-button>
    </template>
  </ThreeSectionTabsPage>
</template>
<script lang="ts" setup>
  import { ElMessage, FormInstance, FormRules } from 'element-plus';
  import type { TabsPaneContext } from 'element-plus';
  import { useRoute, useRouter } from 'vue-router';
  import { useTagsViewStore } from '@/store/modules/tagsView';
  import AceEditor from '@/components/AceEditor.vue';
  import { useI18n } from 'vue-i18n';
  import { loadingInstance } from '@/utils';
  import { getColumnList, createSequence, createSequenceDdl } from '@/api/sequence';
  import { getObjectList } from '@/api/metaData';
  import EventBus, { EventTypeName } from '@/utils/event-bus';

  const route = useRoute();
  const router = useRouter();
  const TagsViewStore = useTagsViewStore();
  const { t } = useI18n();
  const loading = ref(null);

  const platform = ref(route.query.platform as Platform);
  const currentTabName = ref('Base');
  const ruleFormRef = ref<FormInstance>();
  const editorPreRef = ref();
  const refreshParams = reactive({
    rootId: route.query.rootId as string,
  });

  const form = reactive({
    sequenceName: '',
    increment: '',
    start: '',
    minValue: '',
    maxValue: '',
    cache: '',
    isCycle: false,
    tableSchema: route.query.schema || undefined,
    tableName: '',
    schema: route.query.schema || undefined,
    tableColumn: '',
    connectionName: route.query.connectInfoName,
    uuid: route.query.uuid,
  });

  const rules = reactive<FormRules>({
    sequenceName: [
      { required: true, message: t('rules.empty', [t('sequence.name')]), trigger: 'blur' },
    ],
    increment: [
      {
        pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/,
        message: t('rules.integer', [t('sequence.increment')]),
        trigger: 'blur',
      },
    ],
    start: [
      {
        pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/,
        message: t('rules.integer', [t('sequence.startValue')]),
        trigger: 'blur',
      },
    ],
    minValue: [
      {
        pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/,
        message: t('rules.integer', [t('sequence.minValue')]),
        trigger: 'blur',
      },
    ],
    maxValue: [
      {
        pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/,
        message: t('rules.integer', [t('sequence.maxValue')]),
        trigger: 'blur',
      },
    ],
    cache: [
      {
        pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/,
        message: t('rules.integer', [t('sequence.cacheValue')]),
        trigger: 'blur',
      },
    ],
  });
  const list = reactive({
    tableList: [],
    columnList: [],
  });

  const handleTabClick = (tab: TabsPaneContext) => {
    if (tab.paneName === 'Sql') handleSave(tab.paneName);
  };

  const fetchTableName = async () => {
    const data = await getObjectList({
      connectionName: form.connectionName,
      objectType: 'r',
      schema: form.schema,
      uuid: form.uuid,
    });
    list.tableList = data as unknown as any[];
  };
  const fetchColumnList = async () => {
    if (!form.tableName) return;
    const data = await getColumnList({
      connectionName: form.connectionName,
      objectName: form.tableName,
      schema: form.schema,
      uuid: form.uuid,
    });
    list.columnList = data as unknown as any[];
  };
  const changTableName = () => {
    form.tableColumn = '';
    fetchColumnList();
  };
  const handleSave = async (type: 'Base' | 'Sql') => {
    const api = {
      Base: createSequence,
      Sql: createSequenceDdl,
    };
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        loading.value = loadingInstance();
        try {
          api[type](form).then((res) => {
            if (type === 'Base') {
              ElMessage.success(`${t('create.sequence')}${t('message.success')}`);
              EventBus.notify(EventTypeName.REFRESH_ASIDER, 'sequenceCollect', refreshParams);
              handleClose();
            } else if (type === 'Sql') {
              editorPreRef.value.setValue(res);
            }
          });
        } finally {
          loading.value.close();
        }
      } else {
        currentTabName.value = 'Base';
      }
    });
  };
  const handleReset = () => {
    Object.assign(form, {
      sequenceName: '',
      increment: '',
      start: '',
      minValue: '',
      maxValue: '',
      cache: '',
      isCycle: false,
      tableName: '',
      tableColumn: '',
    });
    editorPreRef.value.setValue('');
    ruleFormRef.value.clearValidate();
    currentTabName.value = 'Base';
  };

  const handleClose = () => {
    TagsViewStore.closeCurrentTabToLatest(router, route);
  };

  onMounted(() => {
    fetchTableName();
  });
</script>
<style lang="scss" scoped>
  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-row) {
    width: 100%;
  }
</style>
